<template>
  <div class="demo-content">
    <h3>{{ title }}</h3>
    <el-tabs value="basis" tab-position="left" @tab-click="handleClick">
      <el-tab-pane label="常用基础" name="basis">
        <el-table :data="basisData" style="width: 100%" border>
          <el-table-column type="index" width="50" label="序号" />
          <el-table-column prop="type" label="类型" width="200" sortable>
          </el-table-column>
          <el-table-column prop="text" label="名称" width="350">
          </el-table-column>
          <el-table-column prop="note" label="其它说明">
            <template slot-scope="scope">
              <span v-html="scope.row.note"></span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="Vue基础知识" name="second">
        <el-table :data="vueData" style="width: 100%" border row-key="type" :tree-props="{ children: 'children' }">
          <el-table-column type="index" width="50" label="序号" />
          <el-table-column prop="type" label="类型" width="200" sortable>
            <template slot-scope="scope">
              <span :class="scope.row.children ? 'font-bold' : ''">{{ scope.row.type }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="text" label="名称" width="350">
          </el-table-column>
          <el-table-column prop="note" label="其它说明">
            <template slot-scope="scope">
              <span v-html="scope.row.note"></span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="工具插件" name="third">
        <el-table :data="toolData" style="width: 100%" border>
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" class="demo-table-expand">
                <el-form-item label="工具名称："><span>{{ props.row.name }}</span></el-form-item>
                <el-form-item label="工具说明："><span>{{ props.row.note }}</span></el-form-item>
                <el-form-item label="安装指令："><span>{{ props.row.command }}</span></el-form-item>
                <el-form-item label="使用方法："><span v-html="props.row.instructions"></span> </el-form-item>
                <el-form-item label="官网地址：">
                  <el-link :href="props.row.url" target="_blank">{{ props.row.url }}</el-link>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="工具名称" prop="name" width="180">
          </el-table-column>
          <el-table-column label="工具说明" prop="note">
          </el-table-column>
          <el-table-column label="官网地址" prop="url">
            <template slot-scope="scope">
              <el-link :href="scope.row.url" target="_blank">{{ scope.row.url }}</el-link>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="其它知识" name="fourth">
        <el-table :data="otherData" style="width: 100%" row-key="type" border :tree-props="{ children: 'children' }">
          <el-table-column type="index" width="50" label="序号" />
          <el-table-column prop="name" label="名称" width="200" sortable>
          </el-table-column>
          <el-table-column prop="note" label="介绍">
          </el-table-column>
          <el-table-column label="参考资料" :show-overflow-tooltip="true" prop="url" width="120">
            <template slot-scope="scope">
              <el-link :href="scope.row.url" target="_blank">{{ scope.row.url }}</el-link>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default ({
  name: 'doc',
  data() {
    return {
      basisData: [{
        type: '快捷键',
        text: '格式化代码快捷建 Alt+Shift+F',
        note: '文件->首选项->设置 (搜索：format on save ,钩选后每次保存格式化代码)'
      }],
      vueData: [{
        type: '选项/生命周期钩子',
        text: '所有生命周期钩子的 this 上下文将自动绑定至实例中',
        note: '生命周钩子的执行顺序如下排序',
        children: [
          {
            type: 'beforeCreate',
            text: 'beforeCreate() {}',
            note: '在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用'
          }, {
            type: 'created',
            text: 'created() {}',
            note: '在实例创建完成后被立即同步调用'
          }, {
            type: 'beforeMount',
            text: 'beforeMount() {}',
            note: '在挂载开始之前被调用'
          }, {
            type: 'mounted',
            text: 'mounted() {}',
            note: '实例被挂载后调用  this.$nextTick(function () { // 仅在整个视图都被渲染之后才会运行的代码 })'
          }, {
            type: 'beforeUpdate',
            text: 'beforeUpdate() {}',
            note: '在数据发生改变后,DOM 被更新之前被调用'
          }, {
            type: 'updated',
            text: 'updated() {}',
            note: '在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。不会保证所有的子组件也都被重新渲染完毕'
          },
          {
            type: 'watch',
            text: 'watch 监听对象是否变化',
            note: 'watch: { title: function (val, oldVal) {}'
          },
          {
            type: 'methods',
            text: 'methods 自定义方法',
            note: 'methods: { <br/> handleClick(tab, event) { } <br/>}'
          }, {
            type: 'components',
            text: '组件注册3种方式',
            note: '1、import LeftMenus from "../components/LeftMenus.vue"<br>2、components: { text-comontes:()=>import {"../components/LeftMenus.vue"} }<br/>3、全局注册  Vue.component(...),不推荐',
          },
        ]
      }, {
        type: '模版/指令',
        text: '{{}}、v-html、v-if、v-else、v-else-if、v-show、v-for、v-model',
        note: '渲染UI常用指令',
        children: [
          {
            type: 'v-html',
            text: 'v-html 原始 HTML;',
            note: '&lt;span v-html=&quot;scope.row.note&quot;&gt;&lt;/span&gt;'
          }, {
            type: 'v-if',
            text: 'v-if   v-else-if   v-else',
            note: '条件渲染 <br>&lt;div v-if=&quot;type === &#x27;A&#x27;&quot;&gt; A&lt;/div&gt;<br>&lt;div v-else-if=&quot;type === &#x27;B&#x27;&quot;&gt; B&lt;/div&gt;<br>&lt;div v-else&gt;Not A/B&lt;/div&gt;'
          }, {
            type: 'v-show',
            text: 'v-show 条件渲染',
            note: '根据表达式之真假值，切换 css 元素的 display 属性; 该标签始终会在页面中<br/>&lt;div v-show=&quot;isShow&quot;&gt;条件渲染v-show&lt;/div&gt;'
          }, {
            type: 'v-for',
            text: 'v-for 遍历渲染',
            note: '可以遍历：Array | Object | number | string | Iterable (2.6 新增) <br/>&lt;div v-for=&quot;(item, index) in items&quot;&gt;&lt;/div&gt;<br />&lt;div v-for=&quot;(val, key) in object&quot;&gt;&lt;/div&gt;<br />d&lt;div v-for=&quot;(val, name, index) in object&quot;&gt;&lt;/div&gt;<br />'
          },
          {
            type: 'v-model',
            text: '表单绑定',
            note: 'select  multiple  和 checkbox 两种类型表单使用的是数组，其它可以为字符<br/>注意：&lt;textarea&gt;{{text}}&lt;/textarea&gt; 不会生效'
          }
        ]
      }, {
        type: '事件',
        text: 'v-on:事件名, 可以简写为 @ 如: @click<br/> 特殊变量 $event ,当前事件对像',
        note: '可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码',
        children: [
          {
            type: '事件/鼠标',
            text: 'click、dblclick、mousedown、mouseup、mouseover、mousemove、mouseout 等',
            note: '单击时触发、双击时触发、按下时触发、弹起时触发、移动到某个设置了此事件的元素上时触发、移动时触发、从某个设置了此事件的元素上离开时触发'
          }, {
            type: '事件/键盘',
            text: 'keydown、keyup、keypress 等',
            note: '当键盘上的某个按键被按下时触发、当键盘上的某个按键被按下后弹起时触发、当输入有效的字符按键时触发'
          }, {
            type: '事件/表单',
            text: 'blur、change、focus、reset、submit 等',
            note: '当前元素失去焦点时触发、当前元素失去焦点并且元素内容发生改变时触发、当某个元素获得焦点时触发、当表单被重置时触发、当表单被提交时触发'
          }, {
            type: '事件/窗口',
            text: 'error、load、resize、unload 等',
            note: '加载文件或图像发生错误时触发、页面内容加载完成时触发、当浏览器的窗口大小被改变时触发、当前页面关闭或退出时触发'
          }
        ]
      }, {
        type: '事件修饰',
        text: '.stop、.prevent、.capture、.self、.once、.passive',
        note: '事件修饰是在事件处理程序中调用,修饰符可以串联顺序很重要<br/>v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。',
        children: [
          {
            type: 'stop',
            text: '.stop 阻止单击事件继续传',
            note: ' 如: @click.stop="doThis" '
          }, {
            type: 'prevent',
            text: '.prevent',
            note: '阻止了事件的默认行为,相当于调用了event.preventDefault方法'
          }, {
            type: 'capture',
            text: '.capture',
            note: '使事件触发从包含这个元素的顶层开始往下触发，即内部元素触发的事件先在此处理，然后才交由内部元素进行处理'
          }, {
            type: 'self',
            text: '.self',
            note: '只当在 event.target 是当前元素自身时触发处理函数,即事件不是从内部元素触发的'
          }, {
            type: 'once',
            text: '.once',
            note: '该事件将只会触发一次'
          }, {
            type: 'passive',
            text: '.passive',
            note: '滚动事件的默认行为 (即滚动行为) 将会立即触发，能够提升移动端的性能'
          }
        ]
      }, {
        type: '组件基础',
        text: 'component',
        note: '组件是可复用的 Vue 实例,具有vue 页面data、computed、watch、methods 以及生命周期钩子等,使用 props 接收接入的参数',
        children: [
          {
            type: 'component',
            text: 'component',
            note: '组件是可复用的 Vue 实例,具有vue 页面data、computed、watch、methods 以及生命周期钩子等,使用 props 接收接入的参数',
          }, {
            type: 'slot',
            text: 'slot 插槽,向组件传递内容',
            note: '父页面：&lt;template v-slot:s1&gt;s1 插槽内容&lt;/template&gt;<br />组件中：&lt;slot name=&quot;s1&quot;&gt;&lt;/slot&gt;',
          }
        ]
      }],
      toolData: [
        {
          name: 'axios',
          command: 'npm install axios',
          note: '易用、简洁且高效的http库',
          instructions: "在 main.js 中 引入 import http from 'axios' 并设置全局变量 Vue.prototype.$http = http;关于 axios 的拦截器请参考官网文档",
          url: 'http://www.axios-js.com/'
        },
        {
          name: 'ElementUI',
          command: 'npm i element-ui -S',
          note: '常用的 element UI 组件库',
          instructions: "在 main.js 中 全局引入 import ElementUI from 'element-ui'; Vue.use(ElementUI); <br> 按需引入import { Input }from 'element-ui'; Vue.use(Input); <br> 然后引入 css 样式 import 'element-ui/lib/theme-chalk/index.css';",
          url: 'http://www.axios-js.com/'
        },
        {
          name: 'js-cookie',
          command: 'npm i js-cookie',
          note: 'cookie 操作库,支持路径、过期时间等',
          instructions: "在需要的地方引入 import Cookie from 'js-cookie';   <br> Cookie.set(key,val); Cookie.get(key); Cookie.remove(key)",
          url: 'https://github.com/js-cookie/js-cookie'
        },
        {
          name: 'vue-router',
          command: 'npm install vue-router@3.5.0',
          note: 'vue 基目路由，建议按需安装指定版本',
          instructions: "新建文件 router/index.js,<br>路由配置中必被三个参数 path、name、component:()=>import('...')<br> 注意路由中, meta 中可以设置缓存 keepAlive: true,",
          url: 'https://router.vuejs.org/zh/'
        },
        {
          name: 'dayjs',
          command: 'npm install dayjs --save',
          note: '小巧的时间工具',
          instructions: "打开main.js 全部使用dayjs<br> import dayjs from 'dayjs'; <br>Vue.prototype.$dayjs = dayjs;<br> 在需要格式化的地方执行 return this.$dayjs(row.value).format('YYYY-MM-DD')",
          url: 'https://copyfuture.com/blogs-details/20211019232440454X'
        },
        {
          name: 'devServer',
          command: '无',
          note: 'vue 自带的代理,解决调用接口路径及跨域问题,结合 axios 使用配置baseUrl',
          instructions: "",
          url: 'https://cli.vuejs.org/zh/config/#devserver'
        },
        {
          name: 'devServer',
          command: '无',
          note: 'vue 自带的代理,解决调用接口路径及跨域问题,结合 axios 使用配置baseUrl',
          instructions: "",
          url: 'https://cli.vuejs.org/zh/config/#devserver'
        }
      ],
      otherData: [
        {
          name: 'vs code 调试 vue项目',
          note: '先按文档安装并配置好，主要先要 npm run server 然后在 按 F5 进入调试; 注意在vs code 工具里面打断点不会生效，需要在断点位置 写入代码 debugger；或采用浏览器的 firbug工具进行调式',
          url: 'https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html'
        }
      ],
      title: '常用Demo 实例'
    }
  },
  methods: {
    handleClick(tab, event) {
    }
  },
  created() {
    // setTimeout(() => {
    //   this.title += ' setTimeout'
    // }, 3000)
  }
});
</script>
<style less="less" scoped>
.demo-content {
  width: 80%;
  margin: auto;
}

.font-bold {
  font-weight: bold;
}

.demo-table-expand {
  padding: 0px 25px;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
}
</style>